<template>
	<view style="margin-top: 10rpx;">
		<u-row>
			<u-col span="9">
				<u-icon name="arrow-left" size="48" @click="back()"></u-icon>
			</u-col>
			<u-col span="3">
				<view style="display: flex; justify-content: space-around;">
					<u-icon name="star" size="48"></u-icon>
					<u-icon name="zhuanfa" size="48"></u-icon>
					<u-icon name="more-dot-fill" size="48"></u-icon>
				</view>
			</u-col>
		</u-row>
		<view style="margin-top: 20rpx;margin-right: 10rpx">
			<u-row>
				<u-col span="8">
					<view style="margin-left: 20rpx;">
						<text class="text-vacancyName">{{vacancy.vacancyName}}</text>
					</view>
				</u-col>
				<u-col span="4">
					<text class="text-salary">{{vacancy.salary}}</text>
				</u-col>
			</u-row>
		</view>
		<view style="margin-top: 15rpx;">
			<u-row>
				<u-col span="1">
					<view style="text-align: right;">
						<u-icon name="map" size="32"></u-icon>
					</view>
				</u-col>
				<u-col span="11">
					<text class="text-address">{{vacancy.address}}</text>
				</u-col>
			</u-row>
		</view>
		<u-line color="#ababab" length="680rpx" margin="40rpx 40rpx" />
		<view style="margin-left: 60rpx;margin-top: 20rpx;">
			<u-row>
				<u-col span="3">
					<u-avatar :src="vacancy.posterPic" size="large"></u-avatar>
				</u-col>
				<u-col span="9">
					<view style="margin-top: 20rpx;">
						<u-row>
							<text style="font-weight: bold;font-size: 32rpx;">{{vacancy.posterName}}</text>
						</u-row>
						<u-row>
							<text>{{vacancy.company}} · 招聘员</text>
						</u-row>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-line color="#ababab" length="680rpx" margin="40rpx 40rpx" />
		<view>
			<text style="font-weight: bold;font-size: 32rpx; margin-left: 25rpx;">职位详情</text>
			<view style="width: 600rpx;margin: auto; margin-top:20rpx ; ">
				<text>{{vacancy.detailed}}</text>
			</view>
		</view>
		<u-line color="#ababab" length="680rpx" margin="40rpx 40rpx" />
		<view style="margin-left: 60rpx;margin-top: 20rpx;">
			<u-row>
				<u-col span="3">
					<u-avatar :src="vacancy.companyPic" size="large" mode="square"></u-avatar>
				</u-col>
				<u-col span="9">
					<view style="margin-top: 5rpx;">
						<u-row>
							<text style="font-weight: bold;font-size: 32rpx;">{{vacancy.company}}</text>
						</u-row>
						<view style="margin-top: 20rpx;">
							<text>{{vacancy.companyCondition}} · </text>
							<text>{{vacancy.companyNumber}}人 · </text>
							<text>{{vacancy.companyIndustry}}业</text>
						</view>
						<u-row>
						</u-row>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-line color="#ababab" length="680rpx" margin="40rpx 40rpx" />
		<view style="margin: auto;width: 680rpx;">
			<image src="/static/map.jpg" mode="scaleToFill" style="width: 100%;"></image>
		</view>

		<view style="margin-top: 40rpx;">
			<text style="font-weight: bold;font-size: 32rpx; margin-left: 40rpx;">猜你感兴趣</text>
			<view class="vacancyList">
				<u-card v-for="(vacancy, index) in otherVacancyList" :key="index" :showHead="false" :showFoot="false"
					:class="['common-card', index === 0 ? 'first-card' : '']" @click="toDetail(vacancy)">
					<view slot="body" class="card-body-layout">
						<u-row gutter="16">
							<u-col span="8">
								<text class="text-vacancyName-guest">{{vacancy.vacancyName}}</text>
							</u-col>
							<u-col span="4">
								<text class="text-salary-guest">{{vacancy.salary}}</text>
							</u-col>
						</u-row>
						<u-row>
							<view style="margin-top: 5rpx;">
								<text class="text-message-guest">{{vacancy.company}}</text>
								<text class="text-message-guest">{{vacancy.companyCondition}}</text>
								<text class="text-message-guest">{{vacancy.companyNumber}}人</text>
							</view>
						</u-row>
						<u-row>
							<u-card :showHead="false" :showFoot="false" margin="0" padding="0"
								style="display: inline-block;margin-top: 5rpx;margin-left: 12rpx;">
								<view style="background-color:#efefef" slot="body">
									<text>{{vacancy.companyIndustry}}</text>
								</view>
							</u-card>
						</u-row>
						<u-row>
							<view style="margin-top: 20rpx;">
								<u-col span="2">
									<u-avatar :src="vacancy.posterPic" size="mini"></u-avatar>
								</u-col>
								<u-col span="10">
									<view style="margin-top: 20rpx;">
										<text>{{vacancy.posterName}} · 招聘人</text>
									</view>
								</u-col>
							</view>
						</u-row>
					</view>
				</u-card>
			</view>
		</view>
		<u-divider color="#ababab" margin-bottom="120" bg-color="#f7f7f7">没有更多</u-divider>
		<view>.</view>
		<view style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; width: 100%;background-color: white;">
			<u-card :showHead="false" :bodyStyle="{padding: '0'}">
				<view slot="body" style="width: 100%;">
					<view class="btn-group">
						<button class="apply-btn" :disabled="applied"
							@click="applyJob">{{applied ? '已申请' : '申请职位'}}</button>
						<button class="collect-btn" @click="collectJob">{{collected ? '已收藏' : '收藏'}}</button>
					</view>
				</view>
			</u-card>
		</view>

	</view>

</template>

<script>
	import {
		create,
		detail,
		pageSearch,
		pageSearchOther,
		confirmResume,
		personalResume,
		checkApplied,
		applyJob,
		collect,
		checkCollect,
		changeCollect
	} from '../../utils/api/modules/vacancy';

	export default {
		data() {
			return {
				vacancyId: "",
				vacancy: [{
					vacancyName: "",
					company: "",
					address: "",
					posterPic: "/static/map.jpg",
					posterName: "",
					salary: ""
				}],
				vacancyList: [{
					vacancyName: "",
					address: "",
					companyPic: ""
				}],
				otherVacancyList: [{
					vacancyName: "",
					address: "",
					companyPic: "",
				}],
				collected: '',
				mobile: "",
				applied: false
			}
		},
		onLoad(options) {
			this.vacancyId = options.id;
			detail({
					id: options.id
				})
				.then(res => {
					this.vacancy = res.data;
					// 判断是否已申请
					const user = uni.getStorageSync('user');
					if (user && user.id) {
						checkApplied({
							userId: user.id,
							jobId: this.vacancy.id
						}).then(res => {
							this.applied = res.data;
						});

						checkCollect({
							userId: user.id,
							jobId: this.vacancy.id
						}).then(res => {
							this.collected = res.data;
						})
					}
				});
			pageSearch({
				pageSize: 1,
				pageNum: 10
			}).then(res => {
				this.vacancyList = res.data.records;
			});
			pageSearchOther({
					id: this.vacancyId
				})
				.then(res => {
					this.otherVacancyList = res.data.records;
				})
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			toDetail(vacancy) {
				uni.navigateTo({
					url: `/pages/vacancy/vacancy-detail?id=${vacancy.id}`
				});
			},
			toMessage() {
				uni.navigateTo({
					url: `/pages/message/message-detail?id=${this.vacancy.posterId}&otherNickName=${this.vacancy.posterName}&otherPic=${this.vacancy.posterPic}`
				});
			},
			async applyJob() {
				if (this.applied) return;

				// 检查是否已登录
				const user = uni.getStorageSync('user');
				if (!user || !user.id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login'
						});
					}, 1500);
					return;
				}

				// 检查是否有简历
				const hasResume = await confirmResume({
					userId: user.id
				});
				if (!hasResume) {
					uni.showModal({
						title: '提示',
						content: '请先完善简历信息',
						confirmText: '去完善',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pages/resume/resume-edit?id=${user.id}`
								});
							}
						}
					});
					return;
				}

				// 获取简历ID
				const resumeRes = await personalResume({
					userId: user.id
				});
				if (!resumeRes || !resumeRes.id) {
					uni.showToast({
						title: '获取简历信息失败',
						icon: 'none'
					});
					return;
				}

				try {
					const applyData = {
						userId: user.id,
						jobId: this.vacancy.id,
						resumeId: resumeRes.id,
					};

					const result = await applyJob(applyData);
					if (result) {
						this.applied = true;
						uni.showToast({
							title: '申请成功',
							icon: 'success'
						});
						// 触发列表刷新
						uni.$emit('refreshVacancyList');
					} else {
						uni.showToast({
							title: '申请失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('申请失败:', error);
					uni.showToast({
						title: '申请失败',
						icon: 'none'
					});
				}
			},
			collectJob() {
				const user = uni.getStorageSync('user');
				if (!user || !user.id) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}

				// 调用收藏API
				if (!this.collected) {
					collect({
						userId: user.id,
						jobId: this.vacancyId
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '收藏成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '收藏失败',
								icon: 'none'
							});
						}
						setTimeout(() => {
							window.location.reload()
						}, 800)
					}).catch(error => {
						console.error('收藏失败:', error);
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						});
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '确定要取消收藏该职位吗？',
						success: async (res) => {
							if (res.confirm) {
								try {
									await changeCollect({
										userId: user.id,
										jobId: this.vacancyId
									}).then(res => {
										if (res.data) {
											uni.showToast({
												title: '取消收藏成功',
												icon: 'success'
											});
										} else {
											uni.showToast({
												title: '取消收藏失败',
												icon: 'none'
											});
										}
									});
									setTimeout(() => {
										window.location.reload()
									}, 800)
								} catch (error) {
									console.error('取消收藏失败：', error);
									uni.showToast({
										title: '取消收藏失败',
										icon: 'none'
									});
								}
							}

						}
					});

				}

			}
		}
	}
</script>

<style>
	.contact-btn {
		width: 100%;
		background-color: #54bcbd !important;
		color: white !important;
		border-radius: 0;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin: 0;
		/* 移除默认 margin */
		padding: 0;
		/* 移除默认 padding */
	}

	.text-vacancyName {
		font-weight: bold;
		/* 可选添加其他样式 */
		font-size: 24px;
		color: black
	}

	.text-salary {
		font-weight: bold;
		font-size: 16px;
		color: #55aaff;
		text-align: right;
		display: block;
		width: 100%;
		margin-top: 20rpx;
	}

	.text-vacancyName-guest {
		font-weight: bold;
		color: black
	}

	.text-salary-guest {
		color: #55aaff;
		text-align: right;
		display: block;
		width: 100%;
		margin-top: 5rpx;
	}

	.text-message-guest {
		color: #ababab;
		margin-left: 10rpx;
	}

	.text-address {
		font-size: 16px;
		display: block;
		color: #ababab;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		max-width: 60%;
		/* 限制宽度（可根据需要调整） */
	}

	.btn-group {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.apply-btn,
	.collect-btn {
		width: 45%;
		background-color: #54bcbd !important;
		color: white !important;
		border-radius: 0;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin: 0;
		/* 移除默认 margin */
		padding: 0;
		/* 移除默认 padding */
	}
</style>